<template>
  <ScaleScreen :width="1920" :height="1080" class="scale-wrap">
    <div class="title">
      <p>{{ title }}</p>
      <p class="running">
        <i class="el-icon-s-promotion" />
        设备运行中
      </p>
    </div>
    <div id="screen">
      <Left />
      <Bottom />
      <div id="container"></div>

      <div class="legend">
        <div class="legend-item" v-for="item in legendData" :key="item.text">
          <span :style="{ backgroundColor: item.color }" class="legend-color"></span>
          <span class="legend-text">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <Footer />
  </ScaleScreen>
</template>
<script>
import { createGraph, setGraphScale } from './createGraph/graph';
import { EType, ETagOptions } from './createGraph/config';
import graphEvent from './createGraph/event';
import ScaleScreen from '../scale-screen/scale-screen.vue';
import Left from './components/Left.vue';
import Footer from './components/Footer.vue';
import Bottom from './components/Bottom.vue';
export default {
  data() {
    return {
      EType,
      ETagOptions,
      activeTab: EType.Car.alias,
      graph: null,
      btn: true,
      edit: false,

      title: '广东广州中通',
      legendData: [
        { color: '#0c79d3', text: '格口/急停' },
        { color: '#8a49a5', text: '供包台' },
        { color: '#40ba88', text: '小车/电机' },
        { color: '#db3f3d', text: '已禁用设备/异常设备' },
      ],
    };
  },
  components: {
    Left,
    Bottom,
    Footer,
    ScaleScreen,
  },
  async mounted() {
    const graph = createGraph('container');
    graphEvent(graph, this);

    this.graph = graph;
    this.graph.drawBackground({
      position: 'center',
      size: '100% 100%',
    });

    // 加载缓存配置
    // const graph_scale_config = JSON.parse(localStorage.getItem('$graph_scale_config'));
    // setGraphScale(this.graph, graph_scale_config);

    // 加载数据
    await this.getData();

    const cells = this.graph.getCells();
    cells.forEach((cell) => {
      if (cell.isEdge()) {
        cell.attr('line/targetMarker', null);
        cell.removeTools();
      }
    });

    this.updateData();
  },
  methods: {
    async getData() {
      try {
        const res = await fetch('/line/viewdata/initViewData');
        const { data } = await res.json();
        this.graph.fromJSON(JSON.parse(data.data));
        setGraphScale(this.graph, {...res});
        return data
      } catch (error) {
        console.error('获取数据时出错:', error);
      }
    },
    updateData() {
      const data = {
        // 小车
        car: [
          { color: '#ff0000', index: 0, remark: 'eqwlk', showName: 0, tag: '1' },
          { color: '#ff0000', index: 1, remark: '', showName: 1, tag: '2' },
          { color: '#31dca0', index: 2, remark: '', showName: 2, tag: '3' },
          { color: '#31dca0', index: 3, remark: '', showName: 3, tag: '4' },
          { color: '#31dca0', index: 4, remark: '', showName: 4, tag: '5' },
          { color: '#ff0000', index: 5, remark: '', showName: 5, tag: '6' },
          { color: '#31dca0', index: 6, remark: '', showName: 6, tag: '7' },
          { color: '#31dca0', index: 7, remark: '', showName: 7, tag: '8' },
          { color: '#31dca0', index: 8, remark: '', showName: 8, tag: '9' },
          { color: '#31dca0', index: 9, remark: '', showName: 9, tag: '10' },
          { color: '#31dca0', index: 10, remark: '', showName: 10, tag: '11' },
        ],
        // 格口
        export: [
          { color: '#ff0000', index: 0, remark: '', showName: '0' },
          { color: '#ff0000', index: 1, remark: '', showName: '1' },
          { color: '#037dd3', index: 2, remark: '', showName: '2' },
        ],
        // 供包台
        entrance: [
          { color: '#ff0000', index: 0, remark: 't', showName: '0', tag: 'entrance1' },
          { color: 'red', index: 1, remark: 'e', showName: '1', tag: 'entrance1' },
          { color: 'green', index: 2, remark: 's', showName: '2', tag: 'entrance1' },
        ],
        // 急停
        // alarm: [
        //   { color: '#66CD00', index: 0, remark: '', showName: '0' },
        //   { color: '#66CD00', index: 1, remark: '', showName: '1' },
        //   { color: '#66CD00', index: 2, remark: '', showName: '2' },
        //   { color: '#66CD00', index: 3, remark: '', showName: '3' },
        // ],
        // 电机
        electrical: [
          { color: '#ff0000', index: 0, remark: 'sss', showName: '0', tag: 'electrical1' },
          { color: '#31dca0', index: 1, remark: 'ddd', showName: '1', tag: 'electrical1' },
          { color: '#31dca0', index: 2, remark: '', showName: '2', tag: 'electrical1' },
          { color: '#31dca0', index: 3, remark: '', showName: '3', tag: 'electrical1' },
        ],
      };
      const graphData = this.graph.getCells();
      const carData = graphData.filter((item) => item.data?.type === EType.Car.alias);
      const exportData = graphData.filter((item) => item.data?.type === EType.Export.alias);
      const entranceData = graphData.filter((item) => item.data?.type === EType.Entrance.alias);
      const electricalData = graphData.filter((item) => item.data?.type === EType.Electrical.alias);

      Object.keys(data).forEach((key) => {
        for (let item of data[key]) {
          const { color, showName, tag, remark } = item;
          // 处理小车
          if (key === EType.Car.alias) {
            carData.forEach((cell) => {
              // 这里-1是因为graph_event那里会导致拐角少了一个，有时间再排查,这里-1在赋值处已经做了处理
              const selectorBody = showName == 0 ? 'body' : `body${showName - 1}`;
              const selectorText = showName == 0 ? 'text' : `text${showName - 1}`;
              const attrs = cell.getAttrs();
              if (cell.prop('data')?.tag === tag) {
                attrs[selectorBody] && cell.attr(`${selectorBody}/fill`, color);
                attrs[selectorBody] && cell.attr(`${selectorText}/text`, remark);
              }
            });
          }

          // 处理格口
          if (key === EType.Export.alias) {
            exportData.forEach((cell) => {
              const selectorBody = showName == 0 ? 'body' : `body${showName - 1}`;
              const selectorText = showName == 0 ? 'text' : `text${showName - 1}`;
              const attrs = cell.getAttrs();
              if (cell.prop('data')?.tag === tag) {
                attrs[selectorBody] && cell.attr(`${selectorBody}/fill`, color);
                attrs[selectorBody] && cell.attr(`${selectorText}/text`, remark);
              }
            });
          }

          // 处理供包台
          if (key === EType.Entrance.alias) {
            entranceData.forEach((cell) => {
              const { tag: curTag, index } = cell.prop('data');
              if (curTag === tag && index == showName) {
                cell.attr(`body1/fill`, color);
                cell.attr(`polygon/fill`, color);
                cell.attr(`body/fill`, color);

                cell.attr(`text/text`, remark);
              }
            });
          }

          // 处理电机
          if (key === EType.Electrical.alias) {
            electricalData.forEach((cell) => {
              const { tag: curTag, index } = cell.prop('data');
              if (curTag === tag && index == showName) {
                cell.attr(`body/fill`, color);
                cell.attr(`text/text`, remark);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
#screen {
  background-image: url('~@/assets/images/screen/background.png');
  background-size: 100% 100%;
  overflow: hidden;
  width: 100%;
  height: 94%;
  position: relative;
}

:deep(.x6-graph.x6-graph-pannable) {
  cursor: default;
}

.title {
  position: absolute;
  top: 0;
  left: 55%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 50px;
  z-index: 99;
  letter-spacing: 2px;

  .running {
    font-size: 20px;
    padding: 12px;
    text-align: center;
    color: #3ed69f;
    font-weight: 700;
  }
}

.legend {
  display: flex;
  width: 310px;
  flex-wrap: wrap;
  gap: 12px 26px;
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.legend-color {
  width: 20px;
  height: 16px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 4px;
}

.legend-text {
  font-size: 14px;
  color: #70737c;
}
</style>
